<template>
  <section class="contianer">
    <el-row type="flex" justify="space-between">
      <!-- 顶部过滤列表 -->
      <div class="flights-content">
        <!-- 过滤条件 -->
        <FlightsFilters :data="cacheFlightsData" @setDataList="setDataList" />

        <!-- 航班头部布局 -->
        <FlightsListHead />

        <!-- 航班信息 -->
        <div>
          <!-- 航班列表 -->
          <FlightsItem v-for="(item,index) in dataList" :key="index" :data="item" />

          <!-- 分页布局 -->
          <el-row type="flex" justify="center" style="margin-top:10px;">
            <!-- size-change：切换条数时候触发 -->
            <!-- current-change: 切换页数时候触发 -->
            <!-- page-size: 默认一页多少条数据 -->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageIndex"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
            ></el-pagination>
          </el-row>
        </div>
      </div>

      <!-- 侧边栏 -->
      <FlightsAside />
    </el-row>
  </section>
</template>

<script>
import FlightsListHead from "@/components/air/flightsListHead";
import FlightsItem from "@/components/air/flightsItem";
import FlightsFilters from "@/components/air/flightsFilters";
import FlightsAside from "@/components/air/flightsAside";

export default {
  components: {
    FlightsListHead,
    FlightsItem,
    FlightsFilters,
    FlightsAside
  },
  data() {
    return {
      // 航班总数据
      flightsData: {
        flights: [],
        info: {},
        options: {}
      },
      // 缓存一份总数据,这份数据一旦赋值之后就不能修改
      cacheFlightsData: {
        flights: [],
        info: {},
        options: {}
      },
      // 保存当前的分页要渲染的数组,已经在computed里计算生成
      // dataList:[],

      // 分页
      pageIndex: 1, // 当前页数
      pageSize: 10, // 当前页面的条数
      total: 0 // 总条数
    };
  },
  computed: {
    // 保存当前的分页要渲染的数组
    // computer会监听函数引入所有实例属性,一旦属性发生了变化就会再次执行函数,返回新的值
    dataList() {
      const arr = this.flightsData.flights.slice(
        (this.pageIndex - 1) * this.pageSize,
        this.pageIndex * this.pageSize
      );
      return arr;
    }
  },
  // 监听路由的变化,在组件被复用使用调用这个路由守卫
  async beforeRouteUpdate(to, from, next) {
    // 获取航班列表的函数,返回promise
    await this.getData(to.query);
    // 必须要调用
    next();
  },
  methods: {
    // 获取航班总数据
    getData(query) {
      // 请求机票列表数据
      return this.$axios({
        url: "/airs",
        // 获取来自url的5的参数
        params: query
      }).then(res => {
        // 总数据,包含了 flights,info,options, flights用来渲染航班列表
        const { data } = res;
        this.flightsData = data;
        // 赋值给拷贝的新数据,这份数据一旦赋值之后就不能被修改
        this.cacheFlightsData = { ...data };
        // 数据总条数
        this.total = this.flightsData.total;
      });
    },
    handleSizeChange(value) {
      // 修改显示的条数
      this.pageSize = value;
    },
    // 切换页数时触发
    handleCurrentChange(value) {
      // 修改当前的页面
      this.pageIndex = value;
    },
    // 传递给子组件修改dataList的事件
    setDataList(arr) {
      this.flightsData.flights = arr;
      // 修改总条数
      this.total = arr.length;
      // 把页面设置为1
      this.pageIndex = 1;
    }
  },
  mounted() {
    this.getData(this.$route.query);
  }
};
</script>

<style scoped lang="less">
.contianer {
  width: 1000px;
  margin: 20px auto;
}

.flights-content {
  width: 745px;
  font-size: 14px;
}

.aside {
  width: 240px;
}
</style>